<template>
  <uv-overlay :show="projectType == 2 || projectType == 3">
    <view class="warp">
      <view class="rect ss-r-20" @tap.stop :style="{ width: '580rpx' }">
        <image
          src="@/static/success.png"
          mode=""
          class="successImage ss-m-x-70"
          v-if="projectType == 3"
        />
        <view class="icon_mes" v-if="projectType == 2">
          <uv-icon name="info-circle" size="55" color="#E93B3D"></uv-icon>
        </view>
        <view class="ss-font-32">
          {{
            projectType == 2 ? "确定提前解锁任务？" : `恭喜，${getCycle}任务已全部完成！`
          }}
        </view>
        <view class="ss-m-y-10 ss-m-x-70 ss-font-26" v-if="projectType == 2">
          注意：只能完成{{ getCycle }}未完成设备数量多余数量无法生效
        </view>
        <view class="rect_line"></view>
        <view
          v-if="projectType == 2"
          class="ss-flex ss-row-between ss-col-center ss-font-28"
        >
          <view class="rect_btn ss-m-x-20 ss-m-y-20" @click="handleCancel">取消</view>
          <view class="btn_line ss-m-x-10"></view>
          <view
            class="rect_btn ss-m-x-20 ss-m-y-20"
            style="color: #4ea770"
            @click="handleConfirm"
          >
            解锁
          </view>
        </view>
        <view
          v-if="projectType == 3"
          class="ss-font-32 success_btn ss-m-y-20"
          @click="handleCancel"
        >
          确定
        </view>
      </view>
    </view>
  </uv-overlay>
  <uv-overlay :show="projectType == 4">
    <view class="warp">
      <view class="rect ss-r-20" :style="{ width: '550rpx' }">
        <view class="icon_mes">
          <uv-icon name="info-circle" size="55" color="#E93B3D"></uv-icon>
        </view>
        <view class="ss-font-32"> 超过{{ getCycle }}最大检查数量 </view>
        <view class="ss-m-y-20 ss-m-x-70 ss-font-26">
          {{ getCycle }}剩余检查数量为{{ count }}
        </view>
        <view class="rect_line"></view>
        <view class="ss-font-32 success_btn ss-m-y-20" @click="handleConfirm">
          确定
        </view>
      </view>
    </view>
  </uv-overlay>
  <uv-overlay :show="projectType == 5">
    <view class="warp">
      <view class="rect ss-r-20" :style="{ width: '580rpx' }">
        <view class="icon_mes">
          <uv-icon name="info-circle" size="55" color="#E93B3D"></uv-icon>
        </view>
        <view class="ss-font-32 ss-p-x-20">
          监测到您进入了弱网或无网络情况，系统已自动切换为无网络链路，请正常执行检查任务并提交，所有提交任务会自动进入任务列表，点击下方图标任务按钮查看
        </view>
        <view class="rect_line"></view>
        <view class="ss-font-32 success_btn ss-m-y-20" @click="handleCancel">
          确定
        </view>
        <view class="arrow-bottom"></view>
      </view>
    </view>
  </uv-overlay>
</template>

<script setup>
import { computed } from "vue";
const emit = defineEmits(["update:projectType", "confirm"]);
const props = defineProps({
  projectType: {
    type: Number,
    default: 0,
  },
  count: {
    type: [Number, String],
    default: 0,
  },
  type: {
    type: String,
    default: "MONTH",
  },
});

// 获取周期
const getCycle = computed(() => {
  let list = [
    { label: "本月", value: "MONTH" },
    { label: "本季", value: "QUARTER" },
    { label: "半年", value: "HALF_A_YEAR" },
    { label: "本年", value: "YEAR" },
    { label: "两年", value: "TWO_YEAR" },
  ];
  let row = list.find((item) => item.value === props.type);
  return row ? row.label : "";
});

// 关闭
const handleCancel = () => {
  emit("update:projectType", 0);
};

// 确认
const handleConfirm = () => {
  emit("confirm", props.projectType);
  emit("update:projectType", 0);
};

</script>

<style lang="scss" scoped>
.warp {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.rect {
  background-color: #fff;
  text-align: center;

  .icon_mes {
    width: 110rpx;
    margin: 20rpx auto;
    margin-top: 50rpx;
  }

  .image {
    margin-top: 50rpx;
    width: 70rpx;
    height: 76rpx;
  }

  .cardImage {
    margin-top: 50rpx;
    width: 70rpx;
    height: 80rpx;
  }

  .successImage {
    margin-top: 30rpx;
    width: 288rpx;
    height: 272rpx;
  }

  .rect_line {
    margin-top: 20rpx;
    width: 100%;
    height: 2rpx;
    background: #e5e5e5;
  }

  .rect_btn {
    width: 48%;
    text-align: center;
  }

  .success_btn {
    color: #4ea770;
    width: 98%;
    text-align: center;
  }

  .btn_line {
    height: 70rpx;
    width: 2rpx;
    background: #e5e5e5;
  }
}

.arrow-bottom {
  position: fixed;
  bottom: 160rpx;
  right: 70rpx;
  width: 142rpx;
  height: 164rpx;
  background: url('~@/static/task-bottom-arrow.png') no-repeat;
}

.leftIcon {
  width: 100%;
  padding: 0 6rpx;
  box-sizing: border-box;
  height: 4rpx;
  margin: 14rpx auto;
}

:deep() .uv-scroll-list {
  padding-bottom: 0 !important;
}

:deep() {
  .uv-radio {
    border: 2rpx solid #dcdfe6;
    padding: 20rpx 50rpx;
    border-radius: 10rpx;
    margin: 20rpx 30rpx;
  }
}
</style>
